<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak指令</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <p v-cloak>{{message}}</p>
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    /**
     v-cloak指令的用法
     1、提供样式
     [v-cloak] {
          display: none;
        }
     2、在插值表达式所在的标签中添加v-cloak指令
     解决闪动问题：
     背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换后显示最终结果
     */
    var vue = new Vue({
        el: "#app",
        data: {
            message: "hi vue!",
        }
    })
</script>
</body>
</html>
